<template>
    <div id="alarm-page">
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <span>报警配置</span>
                </li>
            </ul>
        </div>
        <label>分类
            <el-select v-model="value" placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                >
                </el-option>
            </el-select>
        </label>
        <!--new 像机列表-->
        <div class="row" v-if="value=='camera'" style="margin-top:15px;">
            <div class="col-md-6">
                <div class="portlet light bordered">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-camera-retro"></i>
                            <span class="caption-subject bold font-blue-hoki uppercase">摄像机列表</span>
                            <span class="caption-helper"></span>
                        </div>
                        <div class="actions">
                            <div class="portlet-input input-inline input-small">
                                <div class="input-icon right" >
                                    <i class="icon-magnifier" @click="handleLeftSearch"></i>
                                    <input type="text" class="form-control input-circle"
                                           placeholder="名称查询"
                                           v-model="leftSearchData"
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--v-scroll="loadMore" 暂时delay-->
                    <div class="portlet-body"  v-auotHeight="250">
                        <div class="table-scrollable">
                            <table class="table table-striped table-hover">
                                <thead>
                                <tr>
                                <th>  </th>
                                <th> 摄像机名称 </th>
                                <th> 所属部门 </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item,index) in cameraListData" :key="item.value">
                                    <td class="selectBox">
                                        <span @click="cameraPermission(item,index)">
                                            <el-radio class="radio" :label="index" v-model="radio"
                                            >&nbsp;</el-radio>
                                        </span>
                                    </td>
                                    <td> {{item.name}} </td>
                                    <td> {{item.areaName}} </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="portlet light bordered">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-user"></i>
                            <span class="caption-subject bold font-blue-hoki uppercase">人员列表</span>
                            <span class="caption-helper"></span>
                        </div>
                        <div class="actions">
                            <div class="portlet-input input-inline input-small">
                                <div class="input-icon right">
                                    <i class="icon-magnifier" @click="handleRightSearch"></i>
                                    <input type="text" class="form-control input-circle"
                                           placeholder="名称查询"
                                           v-model="rightSearchData"
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--v-scroll="loadMore" 暂时delay-->
                    <div class="portlet-body"  v-auotHeight="250">
                        <div class="table-scrollable">
                            <table class="table table-striped table-hover">
                                <thead>
                                <tr>
                                    <th>  </th>
                                    <th> 姓名 </th>
                                    <th> 所属部门 </th>
                                    <th> 警员编号 </th>
                                    <th> 手机号码 </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="item in userListData" :key="item.value">
                                    <td class="selectBox">
                                        <el-checkbox v-model="item.checkbox"
                                                    @change="updatePermission(item)"
                                        ></el-checkbox>
                                    </td>
                                    <td> {{item.name}} </td>
                                    <td> {{item.name}} </td>
                                    <td> {{item.policeNo}} </td>
                                    <td> {{item.mobile}} </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--new 人员分类-->
        <div class="row" v-else>
            <div class="col-md-6">
                <div class="portlet light bordered">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-user"></i>
                            <span class="caption-subject bold font-blue-hoki uppercase">人员列表</span>
                            <span class="caption-helper"></span>
                        </div>
                        <div class="actions">
                            <div class="portlet-input input-inline input-small">
                                <div class="input-icon right" >
                                    <i class="icon-magnifier" @click="handleLeftSearch"></i>
                                    <input type="text" class="form-control input-circle"
                                           placeholder="名称查询"
                                           v-model="leftSearchData"
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--v-scroll="loadMore" 暂时delay-->

                    <div class="portlet-body"  v-auotHeight="250">
                        <div class="table-scrollable">
                            <table class="table table-striped table-hover">
                                <thead>
                                <tr>
                                    <th>  </th>
                                    <th> 姓名 </th>
                                    <th> 所属部门 </th>
                                    <th> 警员编号 </th>
                                    <th> 手机号码 </th>
                                </tr>
                                </thead>
                                <tbody class="height-auto">
                                <tr v-for="(item,index) in userListData" :key="index">
                                    <td class="selectBox">
                                        <span @click="userPermission(item,index)">
                                            <el-radio class="radio" :label="index" v-model="radio"
                                            >&nbsp;</el-radio>
                                        </span>
                                    </td>
                                    <td> {{item.name}} </td>
                                    <td> {{item.name}} </td>
                                    <td> {{item.policeNo}} </td>
                                    <td> {{item.mobile}} </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="portlet light bordered">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-camera-retro"></i>
                            <span class="caption-subject bold font-blue-hoki uppercase">像机列表</span>
                            <span class="caption-helper"></span>
                        </div>
                        <div class="actions">
                            <div class="portlet-input input-inline input-small">
                                <div class="input-icon right">
                                    <i class="icon-magnifier" @click="handleRightSearch"></i>
                                    <input type="text" class="form-control input-circle"
                                           placeholder="名称查询"
                                           v-model="rightSearchData"
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--v-scroll="loadMore" 暂时delay-->
                    <div class="portlet-body"  v-auotHeight="250">
                        <div class="table-scrollable">
                            <table class="table table-striped table-hover">
                                <thead>
                                <tr>
                                    <th>  </th>
                                    <th> 摄像机名称 </th>
                                    <th> 所属部门 </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="item in cameraListData" :key="item.value">
                                    <td class="selectBox">
                                        <!--<input type="checkbox" @click="updatePermission(item)" v-model="item.checkbox"/>-->
                                        <el-checkbox v-model="item.checkbox"
                                                     @change="updatePermission(item)"
                                        ></el-checkbox>
                                    </td>
                                    <td> {{item.name}} </td>
                                    <td> {{item.areaName}} </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import {AlarmSrv} from './alarm.service';
    import { Notification } from 'element-ui';

    export default {
        data() {
            return {
                options: [{
                    value: 'camera',
                    label: '摄像机'
                },
                    {
                        value: 'user',
                        label: '人员'
                    }
                ],


                cacheID:0,
                currentPermission: [],
                value: 'camera',
                leftSearchData: '',
				radio:'nochecked',
                rightSearchData: '',
                cameraListData: null,
                allCameras:0,
                userListData: null,
                allUsers:0,
                scrollDisable: false,
                currentPage: 1,
                pageSize:-1
            }
        },
        created() {
            this.getCameraList();
            this.getUserList();
        },
        watch: {
            leftSearchData(curVal, oldVal) {
                this.leftSearchData = curVal;
                if (!curVal) { //如果搜索框为空，则获取数据
                    console.log("左边搜索框内容为空了");
                    this.value === 'camera' ? this.getCameraList() : this.getUserList();
                    this.resetPerRel();
                    this.radio='nochecked';
                }
            },
            rightSearchData(curVal, oldVal) {
                this.rightSearchData = curVal;
                if (!curVal) { //如果搜索框为空，则获取数据
                    console.log("右边搜索框内容为空了");
                    this.value === 'camera' ? this.getUserList() : this.getCameraList();
                    this.resetPerRel();
                    this.radio='nochecked';
                }
            },
            value(curVal, oldVal) {
                this.radio='nochecked';
                this.resetPerRel()
            }
        },
        methods: {
            loadMore() {
                console.log("开始loadmore");
                let currentPage=this.currentPage;
                let pageSize=this.pageSize;
                let allCameras=this.allCameras;
                //let tempData=[];
                if(currentPage*pageSize<=allCameras){//列表没到最高值，可以进行再次加载
                    currentPage++;
                    console.log(currentPage);
                    let params = {
                        "pageIndex":currentPage,
                        "pageSize":pageSize
                    };
                    if(!this.scrollDisable){//可以请求数据
                        this.scrollDisable=true;//不再执行loadmore
                        AlarmSrv.captureDeviceList(params).then(res => {
                            console.log(res)
                            if (res.code === 0) {
                                this.cameraListData = this.cameraListData.concat(res.data.records);
                                this.scrollDisable=false;
                                this.currentPage=currentPage;//更新当前页
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    }
                }
            },
            //获取像机数据列表
            getCameraList() {
                //if (this.cameraListData&&this.cameraListData.length>20) return;
                let params = {
                    "pageIndex":this.currentPage||1,
                    "pageSize":this.pageSize
                };

                AlarmSrv.captureDeviceList(params).then(res => {
                    if (res.code === 0) {
                        this.cameraListData = res.data.records;
                        this.allCameras=res.data.rows;
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //获取人员列表
            getUserList() {
                //if (this.userListData) return;
                let params = {
                    "pageNo":this.currentPage||1,
                    "pageSize":100000
                };
                AlarmSrv.policeList(params).then(res => {
                    console.log("人员列表：")
                    console.log(res.data)
                    if (res.code === 0) {
                        this.userListData = res.data.records;
                        this.allUsers=res.data.totalRecords;
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //左边搜索数据
            handleLeftSearch() {
                this.resetPerRel(); //初始化选择状态
                let params = {
                    "condition": {"name":this.leftSearchData},
                    "pageIndex":this.currentPage,
                    "pageSize":this.pageSize
                }
                if (this.value === 'camera') {
                    if (params.condition.name) { //搜索框不为空，则调用接口模糊查询
                        console.log("开始搜索")
                        console.log(params)
                        AlarmSrv.captureDeviceList(params).then(res => {
                            console.log(res)
                            if (res.code === 0) {
                                this.cameraListData = res.data.records;
                                //初始化勾选情况
                                this.radio='nochecked';
                                this.resetPerRel();
                            }else{
                                console.log(res.msg)
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    }
                } else {
                    if (params.condition.name) { //搜索框不为空，则调用接口模糊查询
                        console.log("开始搜索")
                        console.log(params)
                        params.pageSize=100000;
                        AlarmSrv.policeList(params).then(res => {
                            if (res.code === 0) {
                                this.userListData = res.data.records;
                                 //初始化勾选情况
                                 this.radio='nochecked';
                                 this.resetPerRel();
                            }else{
                                console.log(res.msg)
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    }
                }

            },
            //右边搜索数据
            handleRightSearch() {
                let params = {
                    "condition": {"name":this.rightSearchData},
                    "pageNo":1,
                    "pageSize":100000
                }
                if (this.value === 'camera') {
                    if (params.condition.name) { //搜索框不为空，则调用接口模糊查询
                        AlarmSrv.policeList(params).then(res => {
                            if (res.code === 0) {
                                this.userListData = res.data.records;
                                  //初始化勾选情况
                                  this.radio='nochecked';
                                  this.resetPerRel();
                            }else{
                                console.log(res.msg)
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    }
                } else {
                    if (params.condition.name) { //搜索框不为空，则调用接口模糊查询
                        AlarmSrv.captureDeviceList(params).then(res => {
                            console.log(params)
                            if (res.code === 0) {
                                this.cameraListData = res.data.records;
                                 //初始化勾选情况
                                  this.radio='nochecked';
                                  this.resetPerRel();
                            }else{
                                console.log(res.msg)
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    }
                }
            },
            resetPerRel() {
                this.cacheID=0;
                this.userListData && this.userListData.forEach(item => {
                        this.$set(item, 'radiobox', false);
                        this.$set(item, 'checkbox', false);
                });
                this.cameraListData && this.cameraListData.forEach(item => {
                        this.$set(item, 'radiobox', false);
                        this.$set(item, 'checkbox', false);
                });
            },
            cameraPermission(item,index) {
                if(this.cacheID!=item.id){
                    this.cacheID=item.id;
                }else{
                    return;
                }
                this.radio = index;
                console.log("选中相机信息：");
                console.log(item);
                this.getPermissionRel(item); //得到像机对应人员关系数据
            },
            userPermission(item,index) {
                if(this.cacheID!=item.id){
                    this.cacheID=item.id;
                }else{
                    return;
                }
                this.radio = index;
                console.log("选中人员信息：");
                console.log(item);
                this.getPermissionRel(item);//得到人员对应像机关系数据
            },
            getPermissionRel(item) {
                this.currentPermission=[];//初始化匹配数据；
                let params = { };
                if (this.value === 'camera') {
                    params.id=item.id;
                    AlarmSrv.queryByCaptureId(params).then(res => {
                        console.log(res)
                        if (res.code === 0) {
                            if(res.data.length>0){
                                  this.currentPermission = res.data;
                            }else{
                                 Notification.error({
                                     title: '温馨提示',
                                     duration:800,
                                     message:'没有对应关系数据',
                                     offset: 50
                                 })
                            }
                        }else {
                            console.log(res.msg)
                        }
                        //对有权限的选项进行勾选
                        this.showPermission(item);
                    })
                } else {
                    params.id=item.id;
                    AlarmSrv.queryByPoliceId(params).then(res => {
                        if (res.code === 0) {
                           if(res.data.length>0){
                                this.currentPermission = res.data;
                           }else{
                               Notification.error({
                                 title: '温馨提示',
                                 duration:800,
                                 message:'没有对应关系数据',
                                 offset: 50
                               })
                           }
                        }else {
                            console.log(res.msg)
                        }
                        //对有权限的选项进行勾选
                        this.showPermission(item);
                    })
                }
            },

            //显示权限展示
            showPermission(radioitem) {
                this.resetPerRel(); //先初始化选项
                radioitem.radiobox=true;
                if (this.value === 'camera') {
                    this.userListData.forEach(item => {
                        this.currentPermission.forEach(policeItem => {
                            //测试环境下policeNo不唯一，导致对应的数据关系不对，生产商不会有此问题
                            if (policeItem.user.id === item.id) {
                                //this.$set(item,'isChecked',true);//没有初始化的时候需要用这个
                                item.checkbox = true;
                            }
                        })
                    })
                } else {
                    this.cameraListData.forEach(item => {
                        this.currentPermission.forEach(CaptureDevice => {
                            if (CaptureDevice.id === item.id) {
                                //this.$set(item,'isChecked',true);//没有初始化的时候需要用这个
                                item.checkbox = true;
                            }
                        })
                    })
                }
            },
            updatePermission(item) {
                let radioboxItem={};
                let params={
                    "captureIds":[

                    ],
                    "policeInfos":[

                    ]
                };
                //先判断左边单选框是否有选中，没有则提示用户
                if(this.radio==='nochecked'){
                    Notification.error({
                        title: '温馨提示',
                        duration:800,
                        message:'请先选择相应的摄像机或人员',
                        offset: 50
                    })
                    this.resetPerRel();
                }else{
                    if (this.value==='camera'){//当前分类是相机的情况下，对人员权限进行更新
                        this.userListData&&this.userListData.forEach(item=>{//获取当前checkbox为true所有数据
                            item.checkbox?params.policeInfos.push({"policeNo":item.policeNo,"userId":item.id}):'';
                        });
                        //获取radiobox为true的数据
                        this.cameraListData&&this.cameraListData.forEach(item=>{
                            if(item.radiobox){
                                params.captureIds.push(item.id);
                                radioboxItem=item;
                            }
                        });
                        AlarmSrv.updatePermission(params).then(res => {
                            console.log(res);
//                        res.data===1?radioboxItem.personCount=params.policeInfos.length:item.checkbox=false;
                            res.data===1?console.log("更新成功"):item.checkbox=false;
                        })
                    }else{//否则对相机权限进行更新
                        this.userListData&&this.userListData.forEach(item=>{//获取当前radiobox为true所有数据
                            if (item.radiobox){
                                params.policeInfos.push({"policeNo":item.policeNo,"userId":item.id})
                                radioboxItem=item;
                            }
                        });
                        //获取checkbox为true的数据
                        this.cameraListData&&this.cameraListData.forEach(item=>{
                            if(item.checkbox){
                                params.captureIds.push(item.id);
                            }
                        });
                        AlarmSrv.updatePermission(params).then(res => {
                            console.log(res);
                            //res.data===1?radioboxItem.personCount=params.policeInfos.length:item.checkbox=false;
                            res.data===1?console.log("更新成功"):item.checkbox=false;
                        })
                    }
                }
            },

        }
    }
</script>

<style>
    #alarm-page .portlet-body {
        height: 400px;
        overflow-y: auto;
        padding-top:0;
    }
    #alarm-page .portlet>.portlet-title{
        margin-bottom:0;
    }
    #alarm-page .selectBox{
        padding-left: 20px;
    }
    #alarm-page .page-bar {
        margin-bottom: 10px;
    }
    .el-radio__inner {
	    border-radius: 50% !important;
	}
    .table>tbody>tr>td{
        vertical-align: middle;
    }
    .table>tbody>tr{
        height: 43px;
    }
    .radio{
    	margin-top:0px;
    	margin-bottom: 0px;
    }
</style>